<style lang="scss" scoped>
.rank-container {
    padding-top: 10rpx;
    .rank-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        padding: 26rpx 0;
        border-bottom: 1rpx solid #f6f6f6;

        .rank-left {
            display: flex;
            align-items: center;
            flex: 0 1 100%;
            .rank-index {
                padding: 0 10rpx;
                height: 34rpx;
                background: #455BDF;
                border-radius: 5rpx;
                color: #fff;
                font-size: 32rpx;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 25rpx;
            }
        }

        .rank-type {
            color: #455BDF;
            flex:0 0 50rpx;
            margin-right: 70rpx;
        }
        .rank-num{
            color: #455BDF;
            font-weight: bold;
            flex:0 0 50rpx;
        }
    }

    .rank-item:last-child {
        border: 0;
        padding-bottom: 10rpx;
    }
}
</style>

<template>
    <view class="rank-container">
        <view class="rank-item" v-for="(item, index) in data" :key="index">
            <view class="rank-left">
                <view class="rank-index">
                    TOP{{ index + 1 }}
                </view>
                <view class="rank-name">
                    {{ item.WINDONNAME }}
                </view>
            </view>
            <!-- <view class="rank-type">
                {{ item.type }}
            </view> -->
            <view class="rank-num">
                {{ item.HANDLECOUNT }}
            </view>
        </view>
    </view>
</template>

<script setup>
const props = defineProps({
    data: Array,
})
</script>